<template>
  <el-card class="common-info">
    <div slot="header" class="clearfix">
      <span>常用信息</span>
      <div style="float: right;">
        <el-button
          v-if="!isEditing"
          type="primary"
          size="mini"
          @click="startEditing">
          <i class="el-icon-edit"></i> 编辑
        </el-button>
        <template v-else>
          <el-button
            type="success"
            size="mini"
            @click="saveInfo"
            :loading="saving">
            <i class="el-icon-check"></i> 保存
          </el-button>
          <el-button
            type="info"
            size="mini"
            @click="cancelEditing">
            <i class="el-icon-close"></i> 取消
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="addNewRow">
            <i class="el-icon-plus"></i> 新增
          </el-button>
        </template>
      </div>
    </div>

    <!-- 查看模式 -->
    <el-table
      v-if="!isEditing"
      :data="infoData"
      border
      style="width: 100%">
      <el-table-column
        prop="title"
        label="信息题目"
        width="180">
      </el-table-column>
      <el-table-column
        prop="content"
        label="信息内容">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="150">
      </el-table-column>
    </el-table>

    <!-- 编辑模式 -->
    <el-table
      v-else
      :data="editData"
      border
      style="width: 100%">
      <el-table-column
        label="信息题目"
        width="180">
        <template #default="{row }">
          <el-input v-model="row.title" placeholder="请输入标题"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="信息内容">
        <template #default="{row}">
          <el-input
            type="textarea"
            :rows="1"
            autosize
            v-model="row.content"
            placeholder="请输入内容">
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        width="150">
        <template #default="{row}">
          <el-input v-model="row.remark" placeholder="备注"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="80">
        <template #default="{$index}">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="mini"
            @click="removeRow($index)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import idb from '@/utils/idb';
export default {
  props: {
    projectId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isEditing: false,
      saving: false,
      infoData: [
        { title: '项目目标', content: '完成系统升级改造', remark: '重要' },
        { title: '技术栈', content: 'Vue2 + Spring Boot', remark: '' },
        { title: '交付日期', content: '2023-12-31', remark: '不可延期' }
      ],
      editData: []
    }
  },
  created() {
    this.loadInfoData()
  },
  methods: {
   async loadInfoData() {
      const savedData =  await idb.getAll('projects');
      if (savedData) {
        this.infoData = JSON.parse(savedData)
      }
    },
    startEditing() {
      this.editData = JSON.parse(JSON.stringify(this.infoData))
      this.isEditing = true
    },
    cancelEditing() {
      this.isEditing = false
    },
    addNewRow() {
      this.editData.push({
        title: '',
        content: '',
        remark: ''
      })
    },
    removeRow(index) {
      this.editData.splice(index, 1)
    },
    saveInfo() {
      // 验证数据
      for (let i = 0; i < this.editData.length; i++) {
        const item = this.editData[i]
        if (!item.title.trim()) {
          this.$message.error(`第 ${i + 1} 行的标题不能为空`)
          return
        }
        if (!item.content.trim()) {
          this.$message.error(`第 ${i + 1} 行的内容不能为空`)
          return
        }
      }

      this.saving = true
      
      // 模拟异步保存
      setTimeout(() => {
        this.infoData = JSON.parse(JSON.stringify(this.editData))
        localStorage.setItem(`commonInfo_${this.projectId}`, JSON.stringify(this.infoData))
        
        this.isEditing = false
        this.saving = false
        
        this.$message.success('常用信息已保存')
        this.$emit('info-updated', this.infoData)
      }, 500)
    }
  }
}
</script>

<style scoped>
.common-info {
  margin-bottom: 20px;
}
</style>